<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>藏味优品</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" href="__CSS__/amazeui.min.css"/>
    <link rel="stylesheet" href="__CSS__/style.css"/>
    <link rel="stylesheet" href="__CSS__/dropload.css"/>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/amazeui.min.js"></script>
    <script src="__JS__/dropload.min.js"></script>
</head>
<style type="text/css">
    body {
        background-color:#F7F7F7;
    }
    .list-product-price-span2 {
        display:block;
        font-size:1.4rem !important;
        line-height:1.8rem;
        height: 3.6rem;
        overflow: hidden;
        width: 100%;
        word-wrap: break-word;
    }
    .product-list-share {
        color:#F2431F;
        font-weight:bold;
    }
    .product-detail-box {
        padding:2px;
    }
    .banner-content-box {
        margin:9px;
        margin-top:5px;
        border:1px solid #f5f5f5;
    }
    .product-name-box {
        margin-bottom: 2px;

    }
    .detail-price {
        float:left;
    }
    .navCir {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        background: #fff;
    }
    .navCir li {
        width: 25%;
        padding: 5px;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        float: left;
        text-align: center;
        font-size: 14px;
    }
    .navCir li.active a {
        color: #F03726;
    }
    a:link, a:visited, a:hover {
        text-decoration: none;
        outline: none;
    }
    li {
        list-style: none;
    }
    .product-box {
        margin-bottom:35px;
    }
    .tm-price {
        text-decoration: line-through;
    }
    .am-img-responsive{
        height:35vw !important;
    }

    .suit-top-box {
        margin-top:15px;
        height:40px;
        background-color: white;
        width:100%;
    }
    .suit-top-img {
        width:30%;
        padding:5px;
        margin:0 auto;
    }
</style>

<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav am-dropdown"  data-am-dropdown>
            <a href="javascript:;" class="am-dropdown-toggle"  data-am-dropdown-toggle>
                <i class="am-header-icon am-icon-th-large"></i>
            </a>
            <div style="display:none">

            </div>

        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">藏味优品</a>
        </h1>

    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
        <ul class="am-slides">
            <volist name="banner" id="bc">
                <li>
                    <img src="{:getImgUrl($bc['img'],120)}"/>
                </li>
            </volist>
        </ul>
    </div>
    <div class="suit-top-box">
        <div class="suit-top-img">
            <img src="__IMG__/suit-title.png" width="100%">
        </div>
    </div>
    <div class="banner-content-box">
        <a href="{:U('Customization/index',array('product_id'=>144))}"><img src="__IMG__/banner-content.png" width="100%"></a>
    </div>

    <div class="am-cf am-g product-box">
        <ul class="am-avg-sm-2 my-shop-product-list">
            <volist name="list" id="vo">
                <li>
                    <div class="am-panel am-panel-default">
                        <div class="am-panel-bd product-detail-box">
                            <img class="am-img-responsive" src="{:getImgUrl($vo['img'],120)}" />
                            <div class="product-name-box">
                                <span class="list-product-price-span2"><a href="{:U('Index/detail',array('id'=>$vo['id']))}">【特色农产品】{$vo['name']}</a></span>
                            </div>
                            <ol class="am-avg-sm-2 product-list-share">
                                <li style="float:left;"><span class="detail-price">￥{$vo.price}</span></li>
                                <li style="float:right;"><a class="am-btn am-btn-warning am-btn-xs index-addcart-btn am-radius" style="display:block;width:auto;height:auto" href="{:U('Index/detail',array('id'=>$vo['id']))}">立即购买</a></li>
                            </ol>
                        </div>
                    </div>
                </li>
            </volist>
        </ul>
    </div>


    <!--底部-->
    <div class="navCir">
        <li class="active"><a href="{:U('Index/index')}"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="{:U('Classify/index')}"><i class="am-icon-list"></i>分类</a></li>
        <li><a href="{:U('ShoppingCart/index')}"><i class="am-icon-shopping-basket"></i>购物车</a></li>
        <li><a href="{:U('UserCenter/index')}"><i class="am-icon-user"></i>我的</a></li>
    </div>
</div>
<!--隐藏页面异步加载页数-->
<input id="page" type="hidden" value="1">
<script>
    $(function(){

        // dropload
        var dropload = $('.product-box').dropload({
            scrollArea : window,
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">暂无数据</div>'
            },

            loadDownFn : function(me){
                var page = parseInt($('#page').val())+1;
                $.ajax({
                    type: 'GET',
                    url: "{:U('index/index')}",
                    data:"page="+page,
                    dataType: 'json',
                    success: function(data){
                        if(data['status']){
                            console.log('123');
                            $('#page').val(page);
                            var result = '';
                            for(var i = 0; i < data.info.length; i++){
                                console.log(data.info[i]);
                                console.log(data.info[i].min_price);
                                result +=  "<li><div class='am-panel am-panel-default'><div class='am-panel-bd product-detail-box'><img class='am-img-responsive' src='/index.php/Api/picture/index?id="+data.info[i].img+"&size=120' />"+
                                        "<div><span class='list-product-price-span2'><a href='/index.php/Home/Index/detail/id/"+data.info[i].id+"'>【特色农产品】"+data.info[i].name+"</a></span></div>"+
                                        "<ol class='am-avg-sm-2 product-list-share'> <li ><span class='detail-price' style='float:left;'>￥"+data.info[i].price+"</span></li>"+
                                        "<li><center><a class='am-btn am-btn-warning am-btn-xs index-addcart-btn am-radius' style='display:block;width:auto;height:auto' href='/index.php/Home/Index/detail/id/"+data.info[i].id+"'>立即购买</a></center></li>"+
                                        "</ol></div> </div> </li>";
                            }

                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $('.my-shop-product-list').append(result);
                                // 每次数据加载完，必须重置
                            },1000);
                        }

                      if(!data['status']){
                            console.log('546115442');
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        setTimeout(function(){
                            me.resetload();
                        },1500);

                    }, error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        dropload.resetload();
                    }
                });
            }
        });
    });
</script>
</body>
</html>
